<template>
  <div>
    <textarea ref="editor"></textarea>
  </div>
</template>

<!-- https://blog.csdn.net/u014026324/article/details/123281040?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-123281040-blog-124994320.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-123281040-blog-124994320.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=4 -->
<script setup lang="ts">
// 引入全局实例
import _CodeMirror from 'codemirror/lib/codemirror';
// 核心样式
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/selection/active-line';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/display/fullscreen.css';
import 'codemirror/addon/dialog/dialog.css';
import 'codemirror/addon/search/matchesonscrollbar.css';
import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/mode/sql/sql';
import { ref, nextTick, computed, watch } from 'vue';

const props = defineProps({
  mode: {
    type: String,
    required: false,
    default: 'sql'
  },
  content: {
    type: String,
    required: false,
    default: ''
  }
});

const editor = ref();
let coder: {
  on: (arg0: string, arg1: () => void) => any;
  showHint: () => void;
  setValue: (arg0: string) => void;
  setOption: (arg0: string, arg1: string) => void;
  getValue: () => any;
};
nextTick(() => {
  coder = _CodeMirror.fromTextArea(editor.value, {
    mode: props.mode, // 不设置的话，默认使用第一个引用
    // 缩进格式
    tabSize: 2,
    // 显示行号
    lineNumbers: true,
    lineWrapping: true,
    // theme: 'monokai',
    matchTags: { bothTags: true },
    indentWithTabs: true,
    smartIndent: true,
    matchBrackets: true,
    cursorHeight: 1,
    foldGutter: true,
    autoCloseTags: true,
    autoCloseBrackets: true,
    scrollbarStyle: 'simple',
    extraKeys: {
      'Alt-F': 'findPersistent',
      Ctrl: 'autocomplete'
    },
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'breakpoints']
  });
  coder.on('inputRead', () => {
    coder.showHint();
  });
  coder.setValue(props.content);
});

// const newValue = computed<string>(() => {
//   if (coder) {
//     return getValue();
//   }
//   return '';
// });
// watch([newValue.value], (v1, v2) => {
//   console.log('11', v1, v2);
//   if (v2 && coder && newValue) {
//     const emit = defineEmits(['changeTextarea']);
//     emit('changeTextarea', [...newValue.value]);
//   }
// });

/**
 * 对外提供赋值
 */
const setValue = (val: string) => {
  coder?.setValue(val);
};

/**
 * 设置模式
 */
const setMode = (mode: string) => {
  coder?.setOption('mode', mode);
};

/**
 * 对外提供取值
 */
const getValue = () => {
  if (coder) {
    return coder.getValue();
  }
  return '';
};

defineExpose({
  setValue,
  getValue,
  setMode
});
</script>

<style>
.CodeMirror {
  color: black;
  direction: ltr;
  line-height: 22px;
}
.CodeMirror-hints {
  z-index: 9999 !important;
}
</style>
